<html>
<head>
	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
	<script type="text/javascript" src="../extjs/ext-all.js"></script>

</head>

<body><div id="estadosBr"></div></body>

	<script type="text/javascript">

	var estadosBrasileiros = [
	    [1,'Acre','AC'],
	    [2,'Alagoas','AL'],
	    [3,'Amapá','AP'],
	    [4,'Amazonas','AM'],
	    [5,'Bahia','BA'],
	    [6,'Ceará','CE'],
	    [7,'Distrito Federal','DF'],
	    [8,'Espírito Santo','ES'],
	    [9,'Goiás','GO'],
	    [10,'Maranhão','MA'],
	    [11,'Mato Grosso','MT'],
	    [12,'Mato Grosso do Sul','MS'],
	    [13,'Minas Gerais','MG'],
	    [14,'Pará','PA'],
	    [15,'Paraíba','PB'],
	    [16,'Paraná','PR'],
	    [17,'Pernambuco','PE'],
	    [18,'Piauí','PI'],
	    [19,'Rio de Janeiro','RJ'],
	    [20,'Rio Grande do Norte','RN'],
	    [21,'Rio Grande do Sul','RS'],
	    [22,'Rondônia','RO'],
	    [23,'Roraima','RR'],
	    [24,'Santa Catarina','SC'],
	    [25,'São Paulo','SP'],
	    [26,'Sergipe','SE'],
	    [27,'Tocantins','TO']
	];

	Ext.define('Estado',{
		extend: 'Ext.data.Model',
		fields: ['id','nome','sigla']
	});
	
	Ext.define('EstadoStore',{
		extend: 'Ext.data.ArrayStore',
		model: 'Estado',
		data: estadosBrasileiros
	});
	
	Ext.onReady(function(){

		var store = Ext.create('EstadoStore');

		console.log(store.data.items);
		
		var tpl = Ext.create('Ext.XTemplate',
			'<h1>Estados Brasileiros:</h1>',
			'<tpl for=".">',
			'<p>{data.nome} - {data.sigla}</p>',
			'</tpl>'

		);
		tpl.overwrite('estadosBr',store.data.items);
		
    });
	</script>

</html>